<template>
  <div class="record">
    <!-- 1搜索 -->
    <!-- 12搜索 -->

    <!-- 搜索 -->
    <div class="search">
      <div>
        <span class="color-6 margin-right-10">审核状态</span>
        <el-select
          v-model="query.approveStatus"
          @change="getList"
          placeholder="审核状态"
        >
          <el-option label="全部" value></el-option>
          <el-option label="审核中" value="2"></el-option>
          <el-option label="审核通过" value="1"></el-option>
          <el-option label="审核拒绝" value="3"></el-option>
        </el-select>
      </div>
      <el-button type="primary" @click="dialogVisible = true"
        >新增商户</el-button
      >
    </div>
    <!-- table -->
    <div class="content">
      <el-table
        ref="table"
        v-loading="loading"
        @row-click="handleQueryDetail"
        empty-text="暂无数据"
        style="width: 100%"
        :max-height="700"
        :data="shopListData"
      >
        <el-table-column
          prop="id"
          label="商城id"
          width="80"
          show-overflow-tooltip
        />

        <el-table-column prop="name" label="商城名称" show-overflow-tooltip />

        <el-table-column
          prop="approveStatusText"
          label="审核状态"
        ></el-table-column>

        <el-table-column
          prop="createTime"
          label="申请时间"
          show-overflow-tooltip
        />

        <el-table-column label="操作" header-align="center" width="100">
          <template slot-scope="scope">
            <div v-if="scope.row.approveStatus == 2">
              <el-tooltip
                class="item"
                effect="dark"
                content="编辑"
                placement="bottom"
              >
                <el-button
                  type="text"
                  icon="el-icon-edit"
                  @click.stop="handleEdit(scope.row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="审核通过"
                placement="bottom"
              >
                <el-button
                  type="text"
                  icon="el-icon-check"
                  @click.stop="handleAudit(scope.row, 1)"
                ></el-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="审核不通过"
                placement="bottom"
              >
                <el-button
                  type="text"
                  icon="el-icon-close"
                  @click.stop="handleAudit(scope.row, 2)"
                ></el-button>
              </el-tooltip>
            </div>
            <div v-else>
              <!-- <el-button type="primary"
                         plain
                         size="mini"
                         @click="handleQueryDetail(scope.row)">查看详情</el-button> -->
              <el-tooltip
                class="item"
                effect="dark"
                content="编辑"
                placement="bottom"
              >
                <el-button
                  type="text"
                  icon="el-icon-edit"
                  @click.stop="handleEdit(scope.row)"
                ></el-button>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页-->
    <div class="the-page">
      <el-pagination
        :current-page="query.current"
        :page-size="query.size"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 修改客户基础信息 -->
    <el-dialog
      :title="isEdit ? '编辑商户' : '新增商户'"
      :before-close="onCancel"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="800px"
    >
      <el-form
        :model="form"
        :status-icon="true"
        :rules="rules"
        ref="form"
        label-width="100px"
      >
        <el-row>
          <el-col :span="10">
            <el-form-item label="店铺名" prop="name">
              <el-input
                clearable
                placeholder="请输入店铺名"
                v-model="form.name"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="微信号" prop="wechat">
              <el-input
                clearable
                placeholder="请输入微信号"
                v-model="form.wechat"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 标签选择 -->
        <el-row>
          <el-col>
            <el-form-item label="店铺标签" prop="labelIdList">
              <el-select
                v-model="form.labelIdList"
                @visible-change="visibleChange"
                style="width: 100%"
                multiple
                placeholder="请选择"
              >
                <el-option
                  v-for="item in optionsLabel"
                  :key="item.id"
                  :label="item.val"
                  :value="item.id"
                >
                </el-option>
                <el-pagination
                  small
                  layout="prev, pager, next"
                  @current-change="labelCurrentChange"
                  :total="dicTotal"
                >
                </el-pagination>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 产品选择 -->
        <el-row>
          <el-form-item label="店铺产品" prop="productIdList">
            <el-select
              v-model="form.productIdList"
              @visible-change="visibleChange"
              style="width: 100%"
              multiple
              placeholder="请选择"
            >
              <el-option
                v-for="item in optionsProduct"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
              <el-pagination
                small
                layout="prev, pager, next"
                @current-change="productCurrentChange"
                :total="dicTotal"
              >
              </el-pagination>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="注册人姓名" prop="personName">
              <el-input
                clearable
                placeholder="请输入注册人姓名"
                v-model="form.personName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="手机号" prop="phone">
              <el-input
                clearable
                placeholder="请输入手机号"
                v-model="form.phone"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="身份证号" prop="cardNumber">
              <el-input
                clearable
                placeholder="请输入身份证号"
                v-model="form.cardNumber"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="店铺评分" prop="evaluateScore">
              <el-input-number
                v-model="form.evaluateScore"
                @change="changeEvaluateScore"
                :min="1"
                :max="5"
                label="店铺评分"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
            <el-form-item label="店铺类型" prop="type">
              <el-select v-model="form.type" placeholder="请选择店铺类型">
                <el-option
                  v-for="item in typeOptions"
                  :key="item.id"
                  :label="item.val"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="14">
            <el-form-item label="营业时间">
              <!-- <el-time-picker
                is-range
                v-model="yinYeSJ"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
              >
              </el-time-picker> -->

              <el-time-select
                placeholder="起始时间"
                v-model="form.yinYeStartTime"
                :picker-options="{
                  start: '00:00',
                  step: '00:30',
                  end: '24:59',
                }"
              >
              </el-time-select>
              <el-time-select
                placeholder="结束时间"
                v-model="form.yinYeEndTime"
                :picker-options="{
                  start: '00:00',
                  step: '00:30',
                  end: '24:59',
                  minTime: form.yinYeStartTime,
                }"
              >
              </el-time-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row style="padding-left: 40px">
          <el-col :span="8">
            <el-form-item
              label="省"
              prop="level1AddressCode"
              label-width="50px"
            >
              <el-select
                v-model="form.level1AddressCode"
                clearable
                @change="choseProvince"
                placeholder="省级地区"
              >
                <el-option
                  v-for="(item, $index) in province"
                  :key="$index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="市"
              prop="level2AddressCode"
              label-width="50px"
            >
              <el-select
                v-model="form.level2AddressCode"
                clearable
                @change="choseCity"
                placeholder="市级地区"
              >
                <el-option
                  v-for="(item, $index) in city"
                  :key="$index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="区"
              prop="level3AddressCode"
              label-width="50px"
            >
              <el-select
                v-model="form.level3AddressCode"
                clearable
                @change="choseBlock"
                placeholder="区级地区"
              >
                <el-option
                  v-for="(item, $index) in block"
                  :key="$index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="详细地址" prop="detailAddress">
            <el-input
              clearable
              placeholder="请输入店铺详细地址"
              v-model="form.detailAddress"
            ></el-input>
          </el-form-item>
          <!-- </el-col> -->
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="onCancel">取 消</el-button>
        <el-button type="primary" @click="onSubmit('form')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
import {
  audit,
  queryApproveShopList,
  addZiXun,
} from "@/services/services_shop";
import { getAddress } from "@/services/service_commAddress";
import { getDicList } from "@/services/service_dictionary";
import { queryProductList } from "@/services/product";

const initForm = () => {
  // 666666
  return {
    // id:'',
    businessEndTime: "",
    businessStartTime: "",
    yinYeStartTime: "",
    yinYeEndTime: "",
    cardNumber: "", //身份证号
    detailAddress: "",
    evaluateScore: "",
    goodsList: [],
    level1AddressCode: null,
    level2AddressCode: null,
    level3AddressCode: null,
    name: "",
    personName: "",
    phone: "",
    type: "",
    wechat: "",
    labelIdList: [], //店铺标签
    productIdList: [], //店铺产品
  };
};

export default {
  name: "ShangHu",
  data() {
    return {
      loading: false,
      query: {
        current: 1,
        size: 10,
        approveStatus: "",
        // beginTime: '', // 开始时间
        // endTime: '' // 结束时间
      },
      total: 0,
      auditReqParam: {
        auditAction: "",
        shopId: "",
      },
      shopListData: [],
      // 表单部分
      isEdit: false,
      form: initForm(),
      rules: {
        // yinYeSJ: [
        //   { required: false, message: "请选择营业时间", trigger: "blur" },
        // ],
        cardNumber: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
        ],
        evaluateScore: [
          { required: true, message: "请输入店铺评分", trigger: "blur" },
        ],
        level1AddressCode: [
          { required: true, message: "请选择省份", trigger: "blur" },
        ],
        level2AddressCode: [
          { required: true, message: "请选择城市", trigger: "blur" },
        ],
        level3AddressCode: [
          { required: true, message: "请选择区", trigger: "blur" },
        ],
        detailAddress: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
        ],
        name: [
          { required: true, message: "请输入店铺名称", trigger: "blur" },
          {
            min: 1,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur",
          },
        ],
        personName: [
          { required: true, message: "请输入姓名", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            pattern:
              /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            message: "请输入正确的手机号码",
          },
        ],
        wechat: [{ required: true, message: "请输入微信号", trigger: "blur" }],
        type: [{ required: true, message: "请选择店铺类型", trigger: "blur" }],
        labelIdList: [
          { required: true, message: "请选择店铺标签", trigger: "blur" },
        ],
        productIdList: [
          { required: true, message: "请选择店铺产品", trigger: "blur" },
        ],
      },
      yinYeSJ: [], //营业时间
      dialogVisible: false,
      typeOptions: [
        { val: "授权店", id: "AUTH_STORE" },
        { val: "专卖店", id: "MONOPOLY_STORE" },
      ],
      // 省市区
      province: [],
      shi1: [],
      qu1: [],
      city: [],
      block: [],
      // 产品列表
      optionsProduct: [],
      // 标签列表
      optionsLabel: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      dicCurrent: 1,
      dicSize: 6,
      dicTotal: 0,
    };
  },
  created() {
    this.getList();
    this.getProvice();
    // 店铺标签   店铺产品列表
    this.labelCurrentChange(1);
    this.productCurrentChange(1);
    // 获取门店类型
    // this.getShopType()
  },
  methods: {
    // 获取省数据
    async getProvice() {
      try {
        const res = await getAddress(0);
        if (res.code == 0) {
          this.province = res.data;
        } else {
          this.$message.warning(res.msg);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 获取数据
    async getList() {
      try {
        this.loading = true;
        const res = await queryApproveShopList(this.query);
        if (res.code === 0) {
          // this.data = res.result.records
          this.shopListData = res.data.records;
          this.total = res.data.total;
        } else {
          console.log(this.query);
        }
        this.loading = false;
      } catch (e) {
        console.error(e);
        this.loading = false;
      }
    },

    async auditShop(row, auditAction) {
      try {
        this.auditReqParam.shopId = row.id;
        this.auditReqParam.auditAction = auditAction;
        const res = await audit(this.auditReqParam);
        if (res.code === 0) {
          console.log("审核成功!");
          this.getList();
        }
      } catch (e) {
        console.error(e);
      }
    },
    // 点击编辑按钮
    handleEdit(row) {
      // 666666
      console.log("进入框的时候", row);
      this.isEdit = true;
      this.dialogVisible = true;
      const {
        id,
        businessEndTime,
        businessStartTime,
        cardNumber,
        name,
        labelIdList,
        productIdsList,
        detailAddress,
        evaluateScore,
        personName,
        phone,
        wechat,
        type,
        level1AddressCode,
        level2AddressCode,
        level3AddressCode,
      } = row;
      this.yinYeSJ = [businessStartTime, businessEndTime];
      // this.yinYeStartTime = businessStartTime;
      // this.yinYeEndTime = businessEndTime;

      this.form = {
        businessEndTime,
        businessStartTime,
        cardNumber,
        name,
        labelIdList,
        productIdList: productIdsList,
        yinYeStartTime: businessStartTime,
        yinYeEndTime: businessEndTime,
        detailAddress,
        evaluateScore,
        personName,
        phone,
        wechat,
        type,
        level1AddressCode,
        level2AddressCode,
        level3AddressCode,
        id,
      };
    },
    // 详情
    handleQueryDetail(row) {
      const shopId = row.id;
      this.$router.push({
        path: `/shangHuDetail`,
        query: {
          shopId: shopId,
        },
      });
    },

    handleAudit(row, auditAction) {
      this.auditShop(row, auditAction);
    },
    // 查询出选择的ids
    getIds(arr) {
      const ids = [];
      arr.forEach((item) => {
        ids.push(item.id);
      });
      return ids;
    },
    handleCurrentChange(page) {
      this.query.current = page;
      this.getList();
    },
    // ============form================
    onCancel() {
      this.dialogVisible = false;
      this.form = initForm();
    },
    onSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          if (!this.isEdit) {
            this.form.businessStartTime = this.form.yinYeStartTime;
            this.form.businessEndTime = this.form.yinYeEndTime;
            console.log("新增时候的form", this.form);
            const res = await addZiXun(this.form);
            if (res.code == 0) {
              this.$message.success("新增成功");
              this.onCancel();
              this.onFeach();
            } else {
              this.$message.warning(res.msg);
            }
          } else {
            const res = await updateZiXun(this.form);
            if (res.code == 0) {
              this.$message.success("更新成功");
              this.onCancel();
              this.onFeach();
            } else {
              this.$message.warning(res.msg);
            }
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 切换店铺评分
    changeEvaluateScore() {},
    // 选省
    async choseProvince(e) {
      let that = this;
      that.city = [];
      that.block = [];
      that.form.level2AddressCode = "";
      that.form.level3AddressCode = "";
      for (var index2 in that.province) {
        if (e === that.province[index2].id) {
          try {
            // 请求市级列表
            const res = await getAddress(e);
            if (res.code == 0) {
              that.form.level1AddressCode = that.province[index2].id; //绑定省名字
              that.shi1 = res.data;
              that.city = res.data;
            } else {
              this.$message.warning(res.msg);
            }
          } catch (error) {
            console.log(error);
          }
        }
      }
    },

    // 选市
    async choseCity(e) {
      let that = this;
      that.block = [];
      that.form.level3AddressCode = "";
      for (var index3 in that.city) {
        if (e === that.city[index3].id) {
          try {
            // 请求市级列表
            const res = await getAddress(e);
            if (res.code == 0) {
              that.form.level2AddressCode = that.city[index3].id; //绑定市名字
              that.qu1 = res.data;
              that.block = res.data;
            } else {
              this.$message.warning(res.msg);
            }
          } catch (error) {
            console.log(error);
          }
        }
      }
      console.log(that.form.level2AddressCode);
    },

    // 选区
    choseBlock(e) {
      this.form.level3AddressCode = e;
      console.log(this.form.level3AddressCode);
    },

    // 获取标签
    async getLabelIdList(data) {
      try {
        const res = await getDicList(data);
        if (res.code == 0) {
          this.optionsLabel = res.data.records;
          this.dicTotal = res.data.total;
        } else {
          this.$message.warning(res.msg);
        }
      } catch (error) {
        console.log(error);
      }
    },

    // 获取产品
    async getProductIdList(data) {
      try {
        const res = await queryProductList(data);
        if (res.code == 0) {
          this.optionsProduct = res.data.records;
          this.dicTotal = res.data.total;
        } else {
          this.$message.warning(res.msg);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 获取门店类型
    async getShopType() {
      const data = {
        current: 1,
        size: 9999,
        label: "shop_type",
      };
      try {
        page;

        const res = await getDicList(data);
        if (res.code == 0) {
          this.typeOptions = res.data.records;
        } else {
          this.$message.warning(res.msg);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 标签切换页
    labelCurrentChange(page) {
      this.dicCurrent = page;
      const data = {
        current: this.dicCurrent,
        size: this.dicSize,
        label: "shop_label",
      };
      this.getLabelIdList(data);
    },

    // 产品切换页
    productCurrentChange(page) {
      this.dicCurrent = page;
      const data = {
        current: this.dicCurrent,
        size: this.dicSize,
        //label: "product_series",
      };

      this.getProductIdList(data);
    },
    // 重置分页
    resetPagination() {
      this.dicCurrent = 1;
      this.dicSize = 6;
      this.dicTotal = 0;
      // 店铺标签   店铺产品列表
      this.labelCurrentChange(1);
      this.productCurrentChange(1);
    },
    // 下拉收起的时候重置下分页
    visibleChange(flag) {
      if (!flag) {
        this.resetPagination();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.record {
  padding: 0px 20px 0 20px;

  .search {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  ::v-deep .el-dialog__body {
    padding: 20px 50px 0 0;
  }
}
.btn-list {
  margin-bottom: 18px;
}
</style>
